<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/basic.css" />
	</head>

	<body>
		
		<!--header 开始-->
	    <header class="mui-bar mui-bar-nav title">
	    	<h1 id="title" class="mui-title title-color"><b>注册</b></h1>
		</header>
		<!--header 结束-->
		<div class="mui-content">
		    <div class="page">
			    <div class="main">
			      <form id="registerForm">
			        <div class="item item-username">
			          <input id="username" class="txt-input txt-username" type="text" placeholder="请输入手机号，唯一的嗨聊号" value="" name="username">
			          <b class="input-close" style="display: none;"></b> 
			        </div>
			        <div class="item item-username">
			          <input id="nickname" class="txt-input txt-username" type="text" placeholder="请设置昵称" value="" name="nickname">
			          <b class="input-close" style="display:none;"></b> 
			        </div>
			        <div class="item item-password">
			          <input id="password" class="txt-input txt-password ciphertext" type="password" placeholder="请输入密码" name="password" style="display: inline;">
			          <input id="ptext" class="txt-input txt-password plaintext" type="text" placeholder="请输入密码" style="display: none;" name="ptext">
			          <b class="tp-btn btn-off"></b> 
			        </div>
			        <div class="item item-password">
			          <input id="password_PwdTwo" class="txt-input txt-password_PwdTwo ciphertext_PwdTwo" type="password" placeholder="确认密码" name="password_PwdTwo">
			          <b class="tp-btn_PwdTwo btn-off_PwdTwo"></b> 
			        </div>
			        <div class="item item-username">
			          <input id="email" class="txt-input txt-username" type="text" placeholder="请输入邮箱,便于找回密码" value="" name="email">
			          <b class="input-close" style="display:none;"></b> 
			        </div>
			        <div class="item item-username">
			        	<ul id="radioUl" class="mui-table-view mui-table-view-radio">
							<li class="mui-table-view-cell mui-selected">
								<a class="mui-navigate-right">男</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">女</a>
							</li>
						</ul>
			        </div>
			        <div class="err-tips"> 注册即视为同意 <a target="_blank" href="#">用户服务协议</a> 
			        </div>
			        <div class="ui-btn-wrap" style="margin-top: 10px;"> <button type="submit" class="ui-btn-lg ui-btn-primary" style="line-height: 30px;">用户注册</button> </div>
			      </form>
			    </div>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/app.js" ></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle("light");
	      		plus.navigator.setStatusBarBackground("#4eabe8");
	      		
	      		var gender = "男";
				document.getElementById("radioUl").addEventListener("selected",function(e){
					console.log("当前选中的为："+e.detail.el.innerText);
					gender = e.detail.el.innerText;
				});
				
				var registerForm = document.getElementById("registerForm");
				var username = document.getElementById("username");
				var nickname = document.getElementById("nickname");
				var password1 = document.getElementById("password");
				var password_PwdTwo = document.getElementById("password_PwdTwo");
				var email = document.getElementById("email");
				var re = /^1\d{10}$/;
				var emailTest = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
				
				registerForm.addEventListener("submit", function(e) {
	      			if(!app.isNotNull(username.value)) {
	      				//获取焦点
	      				username.focus();
	      			}else if(!app.isNotNull(nickname.value)) {
	      				nickname.focus();
	      			}else if(!app.isNotNull(password1.value)) {
	      				password1.focus();
	      			}else if(!app.isNotNull(password_PwdTwo.value)) {
	      				password_PwdTwo.focus();
	      			}else if(!app.isNotNull(email.value)) {
	      				email.focus();
	      			}else {
	      				if(!re.test(username.value)) {
	      					app.showToast("手机号格式错误", "error");
	      					return false;
	      				}else if(nickname.value.length < 3) {
	      					app.showToast("昵称不能少于3位", "error");
	      					return false;
	      				}else if(password1.value.length < 6) {
	      					app.showToast("密码不能少于6位", "error");
	      					return false;
	      				}else if(password1.value != password_PwdTwo.value) {
	      					app.showToast("确认密码不一致", "error");
	      					return false;
	      				}else if(!emailTest.test(email.value)) {
	      					app.showToast("邮箱格式错误", "error");
	      					return false;
	      				}
	      				
	      				//获取客户端唯一的clientId
	      				var clientId = plus.push.getClientInfo().clientid;
	      				
	      				var regData = {
	      					username:username.value,
	      					nickname:nickname.value,
							password:password1.value,
							email:email.value,
							gender:gender,
							clientId:clientId
	      				}
	      				
	      				//注册
	      				mui.ajax(app.serverUrl + "/simple-chat/api/user/register",{
							data:JSON.stringify(regData),
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							headers:{'Content-Type':'application/json'},	              
							success:function(data,textStatus, response){
								//失去焦点
								username.blur();
								nickname.blur();
								password1.blur();
								password_PwdTwo.blur();
								email.blur();
								 	
								//服务器返回响应，根据响应结果，分析是否登录成功;
								if(data.status == 0) {
									var token = response.getResponseHeader("token");
									if(token != null) {
										app.removeToken();
										app.setToken(token);
									}
									app.removeUserInfo();
									app.setUserInfo(data.data);
									mui.openWindow("index.html", "index.html");
								}else if(data.status == 6002) {
									app.showToast("该手机号已注册", "error");
								}else if(data.status == 6005) {
									app.showToast("同一设备只能注册一个账号", "error");
								}else {
									app.showToast("注册失败", "error");
								}
							},
							error:function(xhr,type,errorThrown){
								//异常处理；
								app.showToast("网络异常，请检查您的网络", "error");
							}
						});
	      			}
	      			
	      			//阻止form表单默认提交
	      			e.preventDefault();
	      		});
	      		
			});
		</script>
	</body>

</html>